<template>
  <PageWrapper dense>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <Button type="primary">关联供应商</Button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction stopButtonPropagation :actions="[
            {
              label: '修改',
              icon: IconEnum.EDIT,
              type: 'primary',
              ghost: true,
              onClick: handleEdit.bind(null, record),
            },
            {
              label: '删除',
              icon: IconEnum.DELETE,
              type: 'primary',
              danger: true,
              ghost: true,
              popConfirm: {
                placement: 'left',
                title: '是否删除供应商[' + record.spuName + ']?',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]" />
        </template>
      </template>
    </BasicTable>
  </PageWrapper>
</template>

<script setup lang="ts">
import { PageWrapper } from '@/components/Page';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { listProduct } from '@/api/product';
import { formSchems, columns } from './supplier.data';
import { Button } from 'ant-design-vue';
import { IconEnum } from '@/enums/appEnum';
defineOptions({ name: 'supplier' });
const [registerTable] = useTable({
  title: '供应商明细',
  api: listProduct,
  showIndexColumn: true,
  rowKey: 'id',
  useSearchForm: false,
  formConfig: {
    schemas: formSchems,
    labelWidth: 80,
    baseColProps: {
      span: 8,
    },
  },
  columns: columns,
  actionColumn: {
    width: 200,
    title: '操作',
    key: 'action',
    fixed: 'right',
  },
});
// reload();
function handleEdit(record: Recordable) {
  console.log('record', record)
}
async function handleDelete(record: Recordable) {
  console.log('record', record)
}
</script>

<style scoped></style>
